<template>
  <view class="container">
    <view class="header">
      <!-- #ifdef H5 -->
      <view style="height: 40px"></view>
      <!-- #endif -->
      <view>
      <view class="input-box">
        <input class="header-input"
               @blur="search()"
               :disabled="isLoading"
               v-model="requestParam.data.name"
               :placeholder="$i18n.zhToGlobal('输入关键字')"></input>
      </view>
      <view class="search-box"
      :style="{
        opacity: isLoading ? 1 : .8
      }"
            @click="search()"
      >
        <image
            class="search-icon"
          :src="$kt.file.byPath('image/search.svg')"
          mode="widthFix"
          style="width: 40rpx;height: 40rpx;vertical-align: middle;margin-top: 20rpx"></image>
      </view>

      </view>

      <view>
        <u-grid>
          <u-grid-item>
            <view class="select"
            :class="{
              'selected': requestParam.data.sortCode === ''
            }"
                  @click="selectSortCode('')"
            >{{$i18n.zhToGlobal('默认')}}</view>
          </u-grid-item>
          <u-grid-item>
            <view class="select"
            :class="{
              'selected': requestParam.data.sortCode === 'salesVolume'
            }"
                  @click="selectSortCode('salesVolume')"
            >{{$i18n.zhToGlobal('销量')}}</view>
          </u-grid-item>
          <u-grid-item>
            <view class="select"
            :class="{
              'selected': requestParam.data.sortCode === 'price'
            }"
                  @click="selectSortCode('price')"
            >{{$i18n.zhToGlobal('价格')}}</view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

    <view style="height: 140rpx"></view>

    <view
        class="box">

      <scroll-view
          scroll-y
          :scroll-view="false"
          style="height: calc(100vh - 140rpx - 50rpx);width: 100%;"
          :scroll-top="0"
          @scrolltolower="getBodyData()"
          scroll-with-animation
          :scroll-into-view="intoViewIndexId">

        <view>


          <view
              v-if="content&&content.length>0"
              class="goods-card-box">
            <view v-for="(item, index) in content">

              <goods-card-2
                  :item="item"
                  :is-choose="isChoose"
              ></goods-card-2>


            </view>
          </view>

        <view id="intoViewIndex"></view>

        <view style="height: 40rpx"></view>
        <u-loadmore
            iconColor="#999999"
            fontSize="28rpx"
            iconSize="28rpx"
            :status="isLoading?'loading' : 'nomore'"
            :loading-text="$i18n.zhToGlobal('加载中...')"
            :nomore-text="$i18n.zhToGlobal('没有更多了')"
        ></u-loadmore>

        <view style="height: 80rpx"></view>
        </view>

      </scroll-view>
    </view>

  </view>
</template>

<script>
import shop from "@/js/shop";

export default {
  data() {
    return {
      shop,
      isLoading:false,
      requestParam:{
        data:{
          name: "",
          /**
           * 排序编码
           * 按照销量排序 salesVolume
           * 按照价格排序 price
           */
          sortCode:""
        },
        pageNumber: 1,
        pageSize: 20
      },
      content:[],
      isNot:false,
      intoViewIndexId:"",
      isChoose: false
    }
  },
  onLoad(option) {

    if(option?.isChoose){
      this.isChoose = true;
    }
    let titleText = "";
    if(option?.goodsTypeId){
      titleText = shop.getI18nByGoodsTypeId(option.goodsTypeId).name;
      this.requestParam.data.goodsTypeId = option.goodsTypeId;
      this.search();
      // 修改标题
      uni.setNavigationBarTitle({
        title: this.$i18n.zhToGlobal('商品搜索')+" - "+titleText
      })
      return;
    }
    // 修改标题
    uni.setNavigationBarTitle({
      title: this.$i18n.zhToGlobal('商品搜索')
    })
    this.getBodyData();
  },
  methods: {
    selectSortCode(code){
      if(this.isLoading){
        return;
      }
      this.requestParam.data.sortCode = code;
      this.search();
    },
    toIntoView(){
      if(this.isLoading){
        return;
      }
      this.intoViewIndexId = "intoViewIndex"
      setTimeout(()=>{
        this.intoViewIndexId = "";
      },1000);
    },
    search(){
      this.requestParam.pageNumber=1;
      this.isNot = false;
      this.content = [];
      this.getBodyData();
    },
    getBodyData() {
      if(this.isNot||this.isLoading){
        return;
      }
      this.isLoading=true;
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoods/getBodyDataNew',
        data: this.requestParam,
        stateSuccess: (res) => {
          this.toIntoView();
          shop.handleList(res.data.content).then((result)=>{
            this.content.push(...result)
            setTimeout(()=>{
              this.isLoading=false;
            },500)
          });
          this.requestParam.pageNumber++;
          if(res.data.content.length===0){
            this.isNot = true;
            setTimeout(()=>{
              this.isNot = false;
            },1000);
          }
        },
        stateFail: (err) => {
          this.isNot = false;
          this.isLoading=false;
        }
      });

    },

    toGoodsDetail(item) {
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail?goodsId=' + item.id
      })
    },

  }

}
</script>

<style lang="scss" scoped>
.header{
  position: fixed;
  width: 100%;
  height: 80rpx;
  background-color: #FFFFFF;
  padding: 20rpx;
  top:-1rpx;
  box-sizing: border-box;

  .header-input{
    width: 100%;
    height: 80rpx;
    font-size: 32rpx;
    padding: 0 20rpx 0 20rpx;
    border-radius: 30rpx;
    background-color: #F0F0F0;
    box-sizing: border-box;
  }

  .input-box{
    display: inline-block;
    width: calc(100% - 80rpx);
  }
  .search-box{
    display: inline-block;
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    vertical-align: top;
  }
}
.search-box:active{
  .search-icon{
    transform: scale(.95);
  }
}

.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  top: 0;
  left: 0;
  z-index: -1;
}

.grid-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}

.grid-text {
  text-align: center;
  font-size: 28rpx;
}

.box {
  padding: 20rpx;
  background-color: #FFFFFF;
  margin-top: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .to-more {
    float: right;
    font-size: 24rpx;
    color: #999999;
    font-weight: lighter;
  }

  .grid-icon {
    width: 100rpx;
    height: 100rpx;
  }

  .more-text {
    vertical-align: top;
  }

  .more-icon {
    width: 24rpx;
    height: 24rpx;
    vertical-align: top;
    margin-top: 5rpx;
  }

}

.to-more:active{
  transform: scale(.95);
}

.good-card {
  position: relative;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  border: 1rpx solid #F0F0F0;
  border-radius: 20rpx;
  width: 330rpx;

  .good-image {
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    height: 300rpx;
  }

  .good-card-text {
    font-size: 30rpx;
  }

  .good-card-text-box {
    padding: 10rpx;
    box-sizing: border-box;

    .good-card-text {
      // 超出省略号
      overflow: hidden;
      text-overflow: ellipsis;
      // 最多两行
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

.good-card:active {
  transform: scale(.98);
}

.price {
  font-size: 32rpx;
  color: #FF0000;
  display: inline-block;
}

.grid-tips {
  font-size: 20rpx;
  color: #999999;
  margin-top: 20rpx;
  text-align: left;
}

.goods-card-box {
  width: 100%;
  vertical-align: top;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .grid-item {
    width: 32%;
    text-align: center;
    margin-top: 20rpx;
  }
}

.grid-item:active{
  .grid-icon{
    transform: scale(.95);
  }
}

.select{
  color: #999999;
  font-size: 32rpx;
}

.selected{
  color: #000000;
  font-weight: bold;
}
</style>